<template>
  <div class="auther_table_wrap">
    <el-table
      :data="brands"
      border
      style="width: 95.2%; margin: 0px auto"
      size="medium"
    >
      <el-table-column prop="id" label="id" width="100"> </el-table-column>
      <el-table-column prop="name" label="品牌名称"> </el-table-column>
      <el-table-column label="logo图片地址">
        <template slot-scope="scope">
          <img :src="host+scope.row.logo" width="102" />
        </template>
      </el-table-column>
      <el-table-column prop="first_name" label="品牌首字母">
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button size="mini" @click="fnPopShow(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="fnDelBrands(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改品牌" :visible.sync="pop_show" append-to-body>
      <el-form
        :model="BrandsForm"
        status-icon
        :rules="rulesBrandsForm"
        ref="ChannelsForm"
        label-width="100px"
      >

        <el-form-item label="品牌名称：" prop="name">
          <el-input
            type="text"
            v-model="BrandsForm.name"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item label="品牌首字母：" prop="first_name">
          <el-input
            type="text"
            v-model="BrandsForm.first_name"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item label="logo图片" prop="logo">
          <template>
            <img :src="host+BrandsForm.logo" width="102" />
          </template>
        </el-form-item>

        <!-- 图片上传  自动上传 el-upload组件自动给发送post请求-->
        <el-form-item label="商品图片" prop="logo">
          <el-upload 
          :action="host + '/v1/goods/brand/logo/'" 
          :auto-upload="true"
          :on-success="handleSuccess"
          :on-error="handleError"
          :data="uploadData"
          >
            <el-button size="small" type="primary">点击选择图片</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="pop_show = false">取消</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import cons from "@/components/constant";
let token = localStorage.token;
export default {
  name: "OptionsTable",
  // 接收父组件传递的值
  props: ["brands"],
  data() {
    return {
      uploadData:{
        token:localStorage.token,
      },
      host:cons.apis,
      pop_show: false,
      group_type_list: [],
      category_list: [],
      BrandsForm: {
        name: "",
        first_name: "",
        logo: "",
      },
      fileList: [],
      rulesBrandsForm: {},
    };
  },
  methods: {
    // 上传图片成功的事件函数
    handleSuccess(res,files){
      console.log('响应',res,files)
      this.BrandsForm.logo = '/' + res.static_path + '/' + files.name
    },

    // 上传失败的响应
    handleError(){
      console.log('上传图片失败',err)
    },

    // 点击编辑触发的方法
    fnPopShow(id) {
      this.pop_show = true;
      this.edit_id = id;
      this.axios
        .get(cons.apis + "/v1/goods/brands/" + this.edit_id + "/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((res) => {
          this.BrandsForm.name = res.data.name;
          this.BrandsForm.logo = res.data.logo;
          this.BrandsForm.first_name = res.data.first_name;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },

    // 修改点击提交触发的方法
    submitForm() {
      
        this.axios.put(cons.apis + "/v1/goods/brands/" + this.edit_id + "/", 
        this.BrandsForm,{
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((res) => {
          console.log('修改品牌的响应',res)
          this.$message({
            type: "success",
            message: "品牌修改成功!",
          });
          this.pop_show = false;
          this.resetForm("ChannelsForm");
          this.$emit("fnResetTable");  // 相当于刷新
        })
        .catch((err) => {
          console.log(err.response);
        });
    },

    // 删除品牌
    fnDelBrands(id) {
      this.edit_id = id;
      this.$confirm("此操作将删除该品牌, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .delete(cons.apis + "/v1/goods/brands/" + this.edit_id + "/", {
              headers: {
                Authorization: "JWT " + token,
              },
              responseType: "json",
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "删除品牌成功!",
              });
              this.$emit("fnResetTable");
            })
            .catch((err) => {
              if (err.response.status == 404) {
                this.$message({
                  type: "info",
                  message: "图片未找到！",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.fnGetChannelType();
    this.fnGetCategories();
  },
};
</script>

<style scope>
.el-table th,
.el-table td {
  text-align: center;
}
</style>
